<template>
  <view class="main">
    <!-- 赞赏用户列表页面 -->
    <view style="height: 2rpx; background-color: #eeeeee"></view>
    <!-- 无赞赏 -->
    <view class="wu_Huo" v-if="appreciateList.length < 1">
      <image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
      <text>暂无赞赏</text>
    </view>
    <view class="content" v-if="appreciateList.length > 0">
      <view class="text" v-for="(item, index) in appreciateList" :key="index">
        <view class="data">
          <navigator :url="'/pages/index/personal?id=' + item.uid" class="left">
            <image :src="item.avatarUrl" mode="aspectFill"></image>
          </navigator>
          <view class="right">
            <view class="rtop">
              <text class="name">{{ item.realName }}</text>
              <text class="from">{{ item.company }}</text>
            </view>
            <view class="rbottom">
              <text>{{ item.showDate }}</text>
            </view>
          </view>
        </view>
        <view class="blessing" v-if="item.blessWorld">
          <view class="left">
            <image src="../../imges/hot.png" mode="aspectFill"></image>
            <view class="zufu">祝福语：</view>
          </view>
          <view class="right">
            {{ item.blessWorld }}
          </view>
        </view>
      </view>
    </view>
    <navigator
      class="zanshang"
      :url="
        '/pages/index/appreciateAuthor?id=' +
        id +
        '&name=' +
        name +
        '&url=' +
        url +
        '&company=' +
        company
      "
      hover-class="none"
    >
      <view class="text"> 我要赞赏 </view>
    </navigator>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      appreciateList: [],
      status: true,
      id: "",
      name: "",
      url: "",
      company: "",
    };
  },
  onShow() {
    this.zanshangList();
  },
  onLoad(options) {
    this.id = options.id;
    this.name = options.name;
    this.url = options.url;
    this.company = options.company;
  },
  created() {},
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
        icon: "none",
      });
    }, 2000);
  },
  methods: {
    //请求赞赏列表数据
    zanshangList() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/reward/userList",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageSize: 10,
            pageNumber: 1,
            id: this.id,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.appreciateList = res.data.data.rows;
            // if(res.data.data.rows.length > 0){
            // 	that.status = true
            // }else{
            // 	that.status = false
            // }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  box-sizing: border-box;
  padding-bottom: 187rpx;
}
.wu_Huo {
  margin-top: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 320rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}
.content {
  .text {
    display: flex;
    flex-direction: column;
    padding: 29rpx 32rpx 39rpx;
    border-bottom: 1rpx solid #eeeeee;
    box-sizing: border-box;
    .data {
      display: flex;
      .left {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }
      .right {
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .rtop {
          height: 40rpx;
          line-height: 40rpx;
          .name {
            font-size: 28rpx;
            font-family: PingFang-SC-Bold;
            color: #333333;
            font-weight: 400;
          }
          .from {
            margin-left: 17rpx;
            font-size: 24rpx;
            color: #888888;
          }
        }
        .rbottom {
          height: 40rpx;
          line-height: 40rpx;
          text {
            font-size: 24rpx;
            color: #888888;
          }
        }
      }
    }
    .blessing {
      display: flex;
      margin-top: 29rpx;
      box-sizing: border-box;
      .left {
        display: flex;
        height: 32rpx;
        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }
        .zufu {
          width: 115rpx;
          font-size: 28rpx;
          color: #888888;
        }
      }
      .right {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}
.zanshang {
  width: 100%;
  height: 100rpx;
  border-top: 1rpx solid #eeeeee;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 12rpx 32rpx 0 32rpx;
  box-sizing: border-box;
  .text {
    height: 74rpx;
    border-radius: 37rpx;
    text-align: center;
    line-height: 74rpx;
    background-color: #fb9c2b;
    font-size: 30rpx;
    color: #ffffff;
  }
}
</style>
